<template>
  <div class="empty-state" :class="[`empty-${type}`, { 'empty-small': size === 'small' }]">
    <div class="empty-image">
      <img v-if="image" :src="image" :alt="title" />
      <div v-else class="empty-icon">
        <el-icon :size="iconSize">
          <component :is="getIcon()" />
        </el-icon>
      </div>
    </div>
    
    <div class="empty-content">
      <h3 v-if="title" class="empty-title">{{ title }}</h3>
      <p v-if="description" class="empty-description">{{ description }}</p>
      
      <div v-if="$slots.default || actionText" class="empty-actions">
        <slot>
          <el-button 
            v-if="actionText"
            :type="actionType"
            :size="buttonSize"
            @click="handleAction"
          >
            {{ actionText }}
          </el-button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { 
  DocumentRemove, 
  Search, 
  Connection, 
  Warning, 
  Picture,
  Folder,
  User,
  ChatDotRound,
  ShoppingCart,
  Reading
} from '@element-plus/icons-vue'

// Props
const props = defineProps({
  // 空状态类型
  type: {
    type: String,
    default: 'default',
    validator: (value) => [
      'default', 'search', 'network', 'error', 'empty',
      'no-data', 'no-permission', 'no-content', 'loading'
    ].includes(value)
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 描述
  description: {
    type: String,
    default: ''
  },
  // 自定义图片
  image: {
    type: String,
    default: ''
  },
  // 尺寸
  size: {
    type: String,
    default: 'default',
    validator: (value) => ['small', 'default', 'large'].includes(value)
  },
  // 操作按钮文本
  actionText: {
    type: String,
    default: ''
  },
  // 操作按钮类型
  actionType: {
    type: String,
    default: 'primary'
  }
})

// Emits
const emit = defineEmits(['action'])

// 计算属性
const iconSize = computed(() => {
  switch (props.size) {
    case 'small': return 48
    case 'large': return 80
    default: return 64
  }
})

const buttonSize = computed(() => {
  switch (props.size) {
    case 'small': return 'small'
    case 'large': return 'large'
    default: return 'default'
  }
})

// 图标映射
const iconMap = {
  default: DocumentRemove,
  search: Search,
  network: Connection,
  error: Warning,
  empty: Folder,
  'no-data': DocumentRemove,
  'no-permission': User,
  'no-content': Picture,
  loading: ChatDotRound
}

// 默认文案映射
const textMap = {
  default: {
    title: '暂无数据',
    description: '当前没有可显示的内容'
  },
  search: {
    title: '未找到相关内容',
    description: '试试调整搜索关键词或筛选条件'
  },
  network: {
    title: '网络连接失败',
    description: '请检查网络连接后重试'
  },
  error: {
    title: '出现错误',
    description: '页面加载失败，请稍后重试'
  },
  empty: {
    title: '空空如也',
    description: '这里还没有任何内容'
  },
  'no-data': {
    title: '暂无数据',
    description: '当前没有可显示的数据'
  },
  'no-permission': {
    title: '无访问权限',
    description: '您没有权限访问此内容'
  },
  'no-content': {
    title: '暂无内容',
    description: '还没有发布任何内容'
  },
  loading: {
    title: '加载中...',
    description: '正在获取数据，请稍候'
  }
}

// 方法
const getIcon = () => {
  return iconMap[props.type] || iconMap.default
}

const getDefaultTitle = () => {
  return props.title || textMap[props.type]?.title || textMap.default.title
}

const getDefaultDescription = () => {
  return props.description || textMap[props.type]?.description || textMap.default.description
}

const handleAction = () => {
  emit('action')
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  
  &.empty-small {
    padding: 40px 20px;
  }
}

.empty-image {
  margin-bottom: 24px;
  
  img {
    max-width: 200px;
    max-height: 150px;
    opacity: 0.8;
  }
  
  .empty-icon {
    color: var(--el-text-color-placeholder);
    opacity: 0.6;
  }
}

.empty-content {
  max-width: 400px;
}

.empty-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--el-text-color-primary);
  margin-bottom: 8px;
  
  .empty-small & {
    font-size: 16px;
  }
}

.empty-description {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  
  .empty-small & {
    font-size: 13px;
    margin-bottom: 16px;
  }
}

.empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

// 不同类型的样式
.empty-search {
  .empty-icon {
    color: var(--el-color-info);
  }
}

.empty-network {
  .empty-icon {
    color: var(--el-color-warning);
  }
}

.empty-error {
  .empty-icon {
    color: var(--el-color-danger);
  }
}

.empty-no-permission {
  .empty-icon {
    color: var(--el-color-warning);
  }
}

// 响应式
@media (max-width: 768px) {
  .empty-state {
    padding: 40px 16px;
  }
  
  .empty-image img {
    max-width: 150px;
    max-height: 120px;
  }
  
  .empty-title {
    font-size: 16px;
  }
  
  .empty-description {
    font-size: 13px;
  }
}
</style>
